<template>
    <div class="icons">
        <swiper :not-next-tick="false">
            <swiper-slide v-for="(item,key) in homeIcons" :key="key">
                <div class="icons-swiper">
                    <div v-for="(icon,index) in item" :key="index" :to="icon.href">
                        <img :src="icon.src" alt="">
                        <p>{{icon.title}}</p>
                    </div>
                </div>
            </swiper-slide>
        </swiper>
    </div>
</template>

<script>
    export default {
        name: "icons",
        data() {
            return {
                icons: [
                    {title: '周边游', src: '/img/icons/icon.png', href: '/'},
                    {title: '国内游', src: '/img/icons/icon.png', href: '/'},
                    {title: '出境游', src: '/img/icons/icon.png', href: '/'},
                    {title: '跟团游', src: '/img/icons/icon.png', href: '/'},
                    {title: '自助游', src: '/img/icons/icon.png', href: '/'},
                    {title: '广东省自驾游', src: '/img/icons/icon.png', href: '/'},
                    {title: '邮轮', src: '/img/icons/icon.png', href: '/'},
                    {title: '签证', src: '/img/icons/icon.png', href: '/'},
                    {title: '酒店', src: '/img/icons/icon.png', href: '/'}
                ]
            }
        },
        computed:{
            homeIcons(){
                let homeIcons=[]
                this.icons.forEach((item,key) => {
                    let page=Math.floor(key/8);
                    if(!homeIcons[page])homeIcons[page]=[];
                    homeIcons[page].push(item)
                })
                return homeIcons
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "~css/main.scss";
    .icons-swiper {
        margin-top: .26rem;
        height: 0;
        overflow: hidden;
        width: 100%;
        padding-bottom: 60%;
        display: flex;
        flex-direction: row;
        flex-flow: wrap;
        > div {
            margin-bottom:.2rem;
            width: 25%;
            padding-bottom:25%;
            height:0;
            text-align:center;
            >img{
                width:76%;
            }
            >p{
                margin-top: .16rem;
                @include ellipsis();
            }
        }

    }
</style>
